﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="XpressNews.Index" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cphHead" runat="server"> </asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphMain" runat="server">
    <!-- Horizontal Category (1 Column) -->
    <section class="cat-widget wdg-cat-horiz-1col-sm clearfix">
        <div class="widget-title">
            <h3>
                <a href="#">Feature News</a>
            </h3>
            <span class="sub-title"></span>

            <div class="sep-widget"></div>
        </div>

        <div class="widget-content color-theme clearfix">
            <div>
                <article class="first-post" data-showonscroll="true" data-animation="fadeIn">

                    <a href="#" class="post-thumbnail"> <img src="img-samples/1-md.jpg" alt="post-4"/> </a>

                    <div class="top-bar">
                        <span class="likes"> <a href="#"> <i class="icon-heart"></i>15</a> </span>

                        <span class="comments"> <i class="icon-bubble"></i>10</span>
                        <span class="views"> <i class="icon-tv"></i>2000</span>
                    </div>

                    <header class="title-bar">
                        <h4 class="post-title">
                            <a href="#">Microsoft May Be Getting Ready for a Huge Windows 8.1 Flip-Flop</a>
                        </h4>

                        <div class="meta-info">
                            <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                            <span class="date-time"> <i class="icon-alarm2"></i>26 Feb 2013, 05:15 AM</span>
                        </div>

                    </header>

                    <div class="bottom-bar">
                        <span class="btn-srp"> <a href="#">Read More...</a> </span>
                    </div>
                </article>

                <div class="related-posts">
                    <div class="posts clearfix">
                        <div class="post-item" data-showonscroll="true" data-animation="fadeIn">
                            <article class="post-box clearfix">
                                <figure class="wdg-col-4 sec-image">

                                    <div class="mask-background white"></div>

                                    <div class="post-type anim">
                                        <i class="icon-location"></i>
                                    </div>

                                    <div class="post-thumbnail border-radius-2px">
                                        <img class="border-radius-2px" src="img-samples/1-sm.jpg" alt="post-6"/>
                                    </div>

                                    <a href="#" class="more"></a>
                                </figure>

                                <header class="wdg-col-8 sec-title">
                                    <h5>
                                        <a href="#" title="">The Moto G: More Than Just a Budget Phone</a>
                                    </h5>

                                    <div class="meta-info">
                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                        <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>
                                    </div>
                                </header>
                            </article>
                        </div>

                        <div class="post-item" data-showonscroll="true" data-animation="fadeIn">
                            <article class="post-box clearfix">
                                <figure class="wdg-col-4 sec-image">

                                    <div class="mask-background white"></div>

                                    <div class="post-type anim">
                                        <i class="icon-camera2"></i>
                                    </div>

                                    <div class="post-thumbnail border-radius-2px">
                                        <img class="border-radius-2px" src="img-samples/2-sm.jpg" alt="post-5"/>
                                    </div>

                                    <a href="#" class="more"></a>
                                </figure>

                                <header class="wdg-col-8 sec-title">

                                    <span class="btn-srp"> <a href="pg-category.html">Syria</a> </span>

                                    <h5>
                                        <a href="#" title="">Honda Now Lets You 3D Print Its Concept Car Models</a>
                                    </h5>

                                    <div class="meta-info">

                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                        <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>

                                    </div>

                                </header>
                            </article>
                        </div>

                        <div class="post-item" data-showonscroll="true" data-animation="fadeIn">
                            <article class="post-box clearfix">
                                <figure class="wdg-col-4 sec-image">

                                    <div class="mask-background white"></div>

                                    <div class="post-type anim">
                                        <i class="icon-music"></i>
                                    </div>

                                    <div class="post-thumbnail border-radius-2px">
                                        <img class="border-radius-2px" src="img-samples/3-sm.jpg" alt="img-7"/>
                                    </div>

                                    <a href="#" class="more"></a>
                                </figure>

                                <header class="wdg-col-8 sec-title">

                                    <span class="btn-srp"> <a href="pg-category.html">Egypt</a> </span>

                                    <h5>
                                        <a href="#" title="">Google Preparing for a Stock Split in April</a>
                                    </h5>

                                    <div class="meta-info">

                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                        <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>

                                    </div>

                                </header>
                            </article>
                        </div>

                        <div class="post-item" data-showonscroll="true" data-animation="fadeIn">
                            <article class="post-box clearfix">
                                <figure class="wdg-col-4 sec-image">

                                    <div class="mask-background white"></div>

                                    <div class="post-type anim">
                                        <i class="icon-camera"></i>
                                    </div>

                                    <div class="post-thumbnail border-radius-2px">
                                        <img class="border-radius-2px" src="img-samples/4-sm.jpg" alt="post-4"/>
                                    </div>

                                    <a href="#" class="more"></a>
                                </figure>

                                <header class="wdg-col-8 sec-title">

                                    <span class="btn-srp"> <a href="pg-category.html">Palestine</a> </span>

                                    <h5>
                                        <a href="#" title="">11 Super Bowl Snacks to Kick Up Your Game Day Party</a>
                                    </h5>

                                    <div class="meta-info">

                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                        <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>

                                    </div>

                                </header>
                            </article>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>

    <!---->
    <!---->
    <!---->

    <!-- Horizontal Category (2 Columns) -->
    <asp:Repeater ID="rptCategory" runat="server" OnItemCommand="rptCategory_OnItemCommand">
        <ItemTemplate>
            <section class="cat-widget wdg-cat-horiz-2col-sm clearfix">
                <div class="widget-title">
                    <h3>
                        <a href="PageArticlesByCategory.aspx?catId=<%#Eval("catId") %>"><%#Eval("catName") %></a>
                    </h3>
                    <span class="sub-title"></span>

                    <div class="sep-widget"></div>
                </div>

                <div class="widget-content color-theme clearfix">
                    <div>
                        <article class="first-post clearfix" data-showonscroll="true" data-animation="fadeIn">
                            <figure class="sec-image">
                                <a href="#" class="post-thumbnail"> <img src="img-samples/8-md.jpg" alt="post-4"/> </a>

                                <div class="top-bar">
                                    <span class="comments"> <i class="icon-bubble"></i>12</span>
                                    <span class="views"> <i class="icon-tv"></i>500</span>
                                </div>

                                <div class="bottom-bar">
                                    <span class="btn-srp"> <a href="#">Read More...</a> </span>
                                </div>
                            </figure>

                            <div class="sec-desc">
                                <header class="title">
                                    <h4 class="post-title">
                                        <a href="#">10 Photos of Indonesia's Deadly Volcanic Eruption</a>
                                    </h4>
                                </header>

                                <div class="meta-info">
                                    <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                    <span class="date-time"> <i class="icon-alarm2"></i>26 Feb 2013, 05:15 AM</span>
                                </div>

                                <div class="post-desc text-justify">
                                    <p>
                                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed velit urna, placerat quis massa sed, varius consequat ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean convallis luctus sapien a sollicitudin. Nulla vitae gravida diam, et venenatis tellus. Pellentesque congue auctor diam ut faucibus.
                                    </p>
                                </div>
                            </div>
                        </article>

                        <div class="related-posts">
                            <div class="posts clearfix">

                                <div class="post-item odd-item" data-showonscroll="true" data-animation="fadeIn">
                                    <article class="post-box clearfix">
                                        <figure class="wdg-col-4 sec-image">

                                            <div class="mask-background white"></div>

                                            <div class="post-type anim">
                                                <i class="icon-location"></i>
                                            </div>

                                            <div class="post-thumbnail border-radius-2px">
                                                <img class="border-radius-2px" src="img-samples/6-sm.jpg" alt="post-1"/>
                                            </div>

                                            <a href="#" class="more"></a>
                                        </figure>

                                        <header class="wdg-col-8 sec-title">
                                            <h5>
                                                <a href="#" title="">The 8 Types of Super Bowl Ads You'll See This Weekend</a>
                                            </h5>

                                            <div class="meta-info">
                                                <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                                <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>
                                            </div>
                                        </header>
                                    </article>
                                </div>

                                <div class="post-item even-item" data-showonscroll="true" data-animation="fadeIn">
                                    <article class="post-box clearfix">
                                        <figure class="wdg-col-4 sec-image">

                                            <div class="mask-background white"></div>

                                            <div class="post-type anim">
                                                <i class="icon-music"></i>
                                            </div>

                                            <div class="post-thumbnail border-radius-2px">
                                                <img class="border-radius-2px" src="img-samples/5-sm.jpg" alt="post-2"/>
                                            </div>

                                            <a href="#" class="more"></a>
                                        </figure>

                                        <header class="wdg-col-8 sec-title">
                                            <h5>
                                                <a href="#" title="">9 Facebook Pages You Won't Believe Have Millions of Likes</a>
                                            </h5>

                                            <div class="meta-info">
                                                <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                                <span class="date"> <i class="icon-alarm2"></i>17 Aug 2013</span>
                                            </div>
                                        </header>
                                    </article>
                                </div>

                                <div class="divider"></div>

                                <asp:Repeater ID="rptNews" runat="server">
                                    <ItemTemplate>
                                        <div class="post-item odd-item" data-showonscroll="true" data-animation="fadeIn">
                                            <article class="post-box clearfix">
                                                <figure class="wdg-col-4 sec-image">

                                                    <div class="mask-background white"></div>

                                                    <div class="post-type anim">
                                                        <i class="icon-location"></i>
                                                    </div>

                                                    <div class="post-thumbnail border-radius-2px">
                                                        <img class="border-radius-2px" src="img-samples/6-sm.jpg" alt="post-1"/>
                                                    </div>

                                                    <a href="#" class="more"></a>
                                                </figure>

                                                <header class="wdg-col-8 sec-title">
                                                    <h5>
                                                        <a href="#" title="">The 8 Types of Super Bowl Ads You'll See This Weekend</a>
                                                    </h5>

                                                    <div class="meta-info">
                                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                                        <span class="date"> <i class="icon-alarm2"></i>14 Aug 2013</span>
                                                    </div>
                                                </header>
                                            </article>
                                        </div>

                                        <div class="post-item even-item" data-showonscroll="true" data-animation="fadeIn">
                                            <article class="post-box clearfix">
                                                <figure class="wdg-col-4 sec-image">

                                                    <div class="mask-background white"></div>

                                                    <div class="post-type anim">
                                                        <i class="icon-music"></i>
                                                    </div>

                                                    <div class="post-thumbnail border-radius-2px">
                                                        <img class="border-radius-2px" src="img-samples/5-sm.jpg" alt="post-2"/>
                                                    </div>

                                                    <a href="#" class="more"></a>
                                                </figure>

                                                <header class="wdg-col-8 sec-title">
                                                    <h5>
                                                        <a href="#" title="">9 Facebook Pages You Won't Believe Have Millions of Likes</a>
                                                    </h5>

                                                    <div class="meta-info">
                                                        <span class="author"> <i class="icon-user3"></i> <a href="#">Serpentsoft</a> </span>
                                                        <span class="date"> <i class="icon-alarm2"></i>17 Aug 2013</span>
                                                    </div>
                                                </header>
                                            </article>
                                        </div>

                                        <div class="divider"></div>
                                    </ItemTemplate>
                                </asp:Repeater>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </ItemTemplate>
    </asp:Repeater>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphScript" runat="server"> </asp:Content>
